<script setup lang="ts">
import { NButton, NModal, NFormItem, NInput, useMessage } from 'naive-ui'
import useRouteReplace from '@/hooks/useRouteReplace'
import type { WorkFlow } from '@/api/djRecord'
import { sendRequest } from '@/utils/api'
import { useRoute } from 'vue-router'
import { ref } from 'vue'

import VDialogContent from '@/views/OA/Common/DialogContent.vue'
import VScope from '@/views/OA/Common/Scope.vue'

enum Action {
  AGREE = '同意',
  REJECT = '拒绝',
  ADD = '同意并加签'
}

const route = useRoute()
const routeReplace = useRouteReplace(route.query.redirect as string)
const recordId = route.query.id as string
const isApproval = ref(route.query.isApproval === 'true')

const message = useMessage()
const modalVisible = ref(false)
const modalTitle = ref('审批')
const action = ref<Action | null>(null)
const assigneeModalVisible = ref(false)

const opinions = ref('')
const assigneeFlag = ref(false)
const identifyingId = ref<string | null>(null)
const identifyingName = ref<string | null>(null)

const assigneeUsers = ref<any[]>([])
const handleSetUser = (users: any[]) => {
  const user = users[0]
  identifyingId.value = user ? user.identifyingId : null
  identifyingName.value = user ? user.typeName : null
  assigneeModalVisible.value = false
}

const handleSubmit = async () => {
  if (!workFlow.value.fromId) return message.error('未找到流程')
  if (assigneeFlag.value && !identifyingId.value) return message.error('请选择加签用户')

  const [error, res] = await sendRequest({
    module: 'dispose',
    api: 'approve',
    override: {
      data: {
        assigneeFlag: assigneeFlag.value,
        identifyingId: identifyingId.value,
        identifyingName: identifyingName.value,
        resultFlag: action.value === Action.ADD ? null : action.value === Action.AGREE,
        resourceId: recordId,
        fromId: workFlow.value.fromId,
        opinions: opinions.value
      }
    }
  })
  if (error) return message.error(error.message)
  if (res.code !== 0) return message.error(res.msg)
  window.flags.flushDjRecord = true
  message.success(res.msg)
  handleClose()
  document.dispatchEvent(new Event('flushTopCount'))
  routeReplace()
}

const workFlow = ref({} as WorkFlow['infoVo'])
const queryWorkFlow = async () => {
  const [error, res] = await sendRequest({
    module: 'djRecord',
    api: 'workFlow',
    override: {
      params: {
        djRecordId: route.query.id
      }
    }
  })

  if (error) throw error
  if (res.code !== 0) throw new Error(res.msg)
  workFlow.value = res.data.infoVo || {}
}

const handleClose = () => {
  modalVisible.value = false
  handleReset()
}

const handleReset = () => {
  action.value = null
  opinions.value = ''
  assigneeFlag.value = false
  identifyingId.value = null
  identifyingName.value = null
  modalTitle.value = '审批'
}

const handleOpen = (type: Action) => {
  action.value = type
  opinions.value = type
  modalTitle.value = type === Action.ADD ? '加签' : '审批'
  if (type === Action.ADD) assigneeFlag.value = true
  modalVisible.value = true
}

queryWorkFlow()
</script>

<template>
  <p
    v-if="isApproval"
    class="rh-h1"
  >
    点交审核单
  </p>
  <div
    v-if="isApproval"
    class="rh-card"
  >
    <NButton
      color="#5FB17F"
      @click="handleOpen(Action.AGREE)"
    >
      同意
    </NButton>
    <NButton
      color="#F42121"
      ghost
      @click="handleOpen(Action.REJECT)"
    >
      拒绝
    </NButton>
    <NButton
      color="#60abb1"
      type="info"
      @click="handleOpen(Action.ADD)"
      v-if="workFlow.assigneeFlag === 1"
    >
      加签
    </NButton>
  </div>

  <NModal
    :auto-focus="false"
    v-model:show="modalVisible"
  >
    <VDialogContent
      @close="handleClose"
      @submit="handleSubmit"
      :title="modalTitle"
    >
      <NFormItem
        v-if="action === Action.ADD"
        label="选择加签用户:"
        label-placement="left"
      >
        <div style="width: 100%; display: flex; flex-direction: column">
          <NButton
            style="width: 115px; margin-bottom: 10rem"
            type="primary"
            ghost
            @click="assigneeModalVisible = true"
          >
            选择加签用户
          </NButton>
          <div
            class="rh-user"
            v-if="identifyingName"
          >
            {{ identifyingName }}
          </div>
        </div>
      </NFormItem>

      <p style="min-width: 400rem">
        <NFormItem
          label="备注:"
          label-placement="left"
          :show-feedback="false"
        >
          <NInput
            v-model:value="opinions"
            type="textarea"
            :rows="6"
            placeholder="请输入备注"
          />
        </NFormItem>
      </p>
    </VDialogContent>
  </NModal>

  <!-- 选择价签用户 -->
  <NModal
    :auto-focus="false"
    v-model:show="assigneeModalVisible"
    @close="assigneeModalVisible = false"
  >
    <VScope
      @close="assigneeModalVisible = false"
      @scopeSubmit="handleSetUser"
      :defaultList="assigneeUsers"
      :flat="true"
      :radioFlat="true"
    />
  </NModal>
</template>

<style lang="scss" scoped>
.rh-user {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 50rem;
  background-color: #e1e1e1;
  padding: 0 10rem;
}

.rh-h1 {
  font-size: 26px;
  font-weight: 500;
  color: #048c5e;
  margin-bottom: 10rem;
}

.rh-card {
  display: flex;
  align-items: center;
  gap: 0 20rem;
  padding: 20rem;
  margin-bottom: 30rem;
  background-color: #e1e1e1;

  .n-button {
    min-width: 78rem;
  }
}
</style>
